<script setup>
import companyLogo from '@/assets/image/login-company.svg'
import wechat from '@/assets/image/wechat-logo.svg'
import phone from '@/assets/image/phone 1.svg'
</script>

<template>
  <div class="login flex-center">
    <div class="login-main">
      <div class="login-logo">
        <img :src="companyLogo" alt="login company Logo">
      </div>
      <div class="login-form">
        <h3 class="login-form-title flex-center">
          物联网平台
        </h3>
        <form class="im-form">
          <p bottom-line class="im-form-item"><label class="cipply-tag-start im-label">邮箱</label><input
              class="im-input" type="text"></p>
          <p bottom-line class="im-form-item"><label class="cipply-tag-start im-label">密码</label><input
              class="im-input" type="text"></p>
          <p class="im-form-item login-remember flex-between">
            <router-link to="">自动登录？</router-link>
            <router-link to="">忘记密码？</router-link>
          </p>
          <p class="im-form-item">
            <button class="im-button">登录</button>
          </p>
        </form>
        <div class="login-footer">
          <div class="login-more">
            <button class="login-more-item">
              <img :src="wechat" alt="">
            </button>
            <button class="login-more-item">
              <img :src="phone" alt="">
            </button>
          </div>
          <p class="im-description login-no-account flex-center">
            <input type="checkbox"> 同意
            <router-link to="/account/register">《用户协议》</router-link>
            以继续使用服务？
          </p>
          <p class="im-description login-no-account">
            我还没有账号？
            <router-link to="/account/register">注册一个</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.login {
  height: 100%;
  background: rgb(4, 0, 39);

  .login-main {
    overflow: hidden;
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 1pt;
    transform: translateY(-10%);
    height: 300pt;
    width: 500pt;
    background: rgb(255, 255, 255);
    border-radius: 2pt;

    .login-logo {
      height: 100%;
      background: linear-gradient(to top, #01201c 20%, #6e032e 60%, #1e0240 100%);

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }

  .login-form {
    margin: 0 auto;
    display: grid;
    grid-template-rows:2fr 5fr 3fr;
    gap: 1pt;
    width: 90%;
    padding: 10pt 0;
    text-align: center;

    .login-form-title {
      font-size: 15pt;
      color: #b3035b;
    }
  }

  .im-form {
    margin: 0 auto;
    width: 100%;

    .im-form-item[bottom-line] {
      display: grid;
      grid-template-columns: 3fr 6fr;
      border-bottom: 1pt solid #b3035b;

      .im-label {
        background: #b3035b;
        padding-top: 5pt;
        padding-bottom: 3pt;
        padding-right: 6pt;
        color: white;
      }

      .im-input {
        box-sizing: border-box;
        text-indent: 0.5em;
      }
    }

    .im-form-item {
      margin: 10pt 0;
      width: 100%;

      .im-label {
        font-size: 11pt;
      }

      .im-input {
        background-color: transparent;
        font-size: 12pt;
        border: none;
        outline: none;
      }

      .im-button {
        border: none;
        border-radius: 2pt;
        width: 80%;
        background-color: #b3035b;
        padding: 4pt 12pt;
        font-size: 11pt;
        color: #fff;
      }
    }
  }

  .login-remember {
    font-size: 9pt;
    color: #b3035b;
  }

  .login-footer {
    font-size: 9pt;

    .login-more {
      button {
        margin: 6pt 10pt;
        outline: none;
        background-color: #b3035b;
        border: none;
        border-radius: 2pt;
        padding: 3pt;
        color: white;

        img {
          height: 20pt;
          width: 20pt;
        }
      }
    }

    .im-description {
      padding-top: 6pt;
      font-size: 9pt;

      a {
        color: #b3035b;
      }
    }
  }
}
</style>